<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="./扫雷.png">
    <script src="vue.js"></script>
    <title>扫雷</title>
    <link href="./mine.css?time=new Date().getTime()" rel="stylesheet"></link>
  </head>
  <body >
    <div id="app" >
      <div id="sel">
        <select v-model="termSelected">
          <!-- 难度选择 -->
          <option value=""></option>
          <option value="normal" selected>一般</option>
          <option value="middle">中等</option>
          <option value="tough">困难</option>
        </select>
        <button @click="okBT">确定</button>

      </div>
      <br />
      <div id="mainPanel" >
        <!-- 中间模块 -->
        <div class="columnDiv" v-for="(object,y) in rowAndColumn">
          <!-- y -->
          <div class="rowDiv" v-for="(o,x) in object" :key="y">
            <!-- x -->
            <span
              @click.left="leftClick([x,y])"
              @click.right="rightClick([x,y])"
              :class="getClass([x,y])"
              :key="x"
              >{{getUpText([x,y])}}</span
            >
          </div>
        </div>
      </div>

      <div id="score_panel">
          步数：{{step}}<br>
          标记数：{{marked}}/{{difValues[selectedDifValue].mine}}<br>
          <!-- 时间：{{time}}s -->
      </div>
    </div>
    <script src="mines.js?time=new Date().getTime()"></script>
  </body>
</html>
